<template>
  <div>
    <el-container v-for="(item,index) in message" :key="index" >
      <el-aside width="30px" style="margin-top:30px">
        <el-avatar :src="currentUser.headImg" style="float:left" size="small"></el-avatar>
      </el-aside>
      <el-container>
        <el-header style="font-size: 11px;height: 30px;line-height: 30px;text-align: center;">{{item.messageText.sendDate}}</el-header>
        <el-main id="content">{{item.messageText.content}}</el-main><br>
      </el-container>
    </el-container>
    <!-- 回复窗口 -->
    <div id="response">
      <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="messageText.content" maxlength="100" show-word-limit style="width: 400px;"></el-input>
      <div style="text-align:right">
        <el-button @click="post()" size="small">发送</el-button>
        <!-- <button @click="show()">测试</button> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
      return{
        messageText:{
          content:'',
          type:'private' //两人对话就是private
        },

        changeList:[]
      }
    },
    props:{
      message:[],
      currentUser:Object
    },
    methods:{
    //回复信息
    post(){
      this.$axios.post("/message/post/"+this.currentUser.id,this.messageText).then(res=>{
          if(res.data.status=="SUCCESS"){
            this.$message("发布成功！")
            //成功后清除输入框的内容
            this.messageText.content = ''
          }
        })
    },
    //展示消息时将我方消息和对方消息分开
    show(){

      //从sessionStorage中获取当前用户
      let me =JSON.parse(window.sessionStorage.getItem("user"))
      console.log(me);
      //遍历消息集合
      let arr = this.message
      for(var i in arr){
        if(arr[i].receiveUid!=me.id){
          this.changeList.push(i)
        } 
      }
      console.log(this.changeList);
    }
  }
}
</script>

<style scoped>
  #content{
    border: 1px solid gray;
    border-radius: 5px;
    background-color: white;
    width: 80%;
    font-size: 16px;
    margin-left: 10px;
    padding: 8px;
    margin-top: 0px;
  }
  #response{
    position:fixed;
    right: 325px;
    bottom: 85px;
  }
</style>